<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { User, Lock, Message, Phone } from '@element-plus/icons-vue'
import { type LoginForm } from '@/apis/user'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const loginForm = reactive<LoginForm>({
  username: '',
  password: '',
})

const rules = reactive<FormRules<LoginForm>>({
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
})

const userStore = useUserStore()
const router = useRouter()

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log('submit!')
      const userInfo = await userStore.getUserInfo(loginForm)
      console.log(userInfo.value)
      if (userInfo.value.status === 200) {
        ElMessage({ type: 'success', message: '登录成功' })
        router.push('/home')
      } else {
        ElMessage({ type: 'error', message: '登录失败，请检查账号和密码' })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<template>
  <div id="login">
    <div class="login-box">
      <div class="login-box-left">
        <h1>跨境电商平台</h1>

        <div class="user">
          <p>
            <el-icon><Phone /></el-icon>400-000-0000
          </p>
          <p>
            <el-icon><Message /></el-icon>xxx@xxx.com
          </p>
        </div>
      </div>
      <div class="login-box-right">
        <div class="login-header">
          <h2>登陆</h2>
          <span>通过账号密码登录</span>
        </div>

        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="loginForm"
          :rules="rules"
          label-width="auto"
          class="demo-loginForm"
          :size="formSize"
        >
          <el-form-item label="账号" prop="username" class="custom-form-item">
            <el-input v-model="loginForm.username" :prefix-icon="User" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="密码" prop="password" class="custom-form-item">
            <el-input
              type="password"
              v-model="loginForm.password"
              :prefix-icon="Lock"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
          <el-button type="primary" id="login-button" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form>
        <div class="options">
          <router-link to="#">忘记密码</router-link>
          <span></span>
          <router-link to="#">注册账号</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
#login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .login-box {
    display: flex;
    width: 1000px;
    height: 600px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;

    .login-box-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 50%;

      background: url('/images/bg.jpg');
      background-position: center center;
      background-size: cover;

      .user {
        position: absolute;
        left: 50px;
        bottom: 70px;
        color: #aaa;

        p {
          display: flex;
          align-items: center;

          i {
            margin-right: 16px;
          }
        }
      }
    }

    .login-box-right {
      width: 50%;
      padding: 48px 64px;
      box-sizing: border-box;

      .login-header {
        margin-bottom: 32px;

        span {
          font-size: 14px;
          color: #aaa;
        }
      }

      #login-button {
        width: 100%;
      }
    }

    .options {
      display: flex;
      flex-direction: row-reverse;
      width: 100%;
      margin-top: 32px;

      a {
        color: #888;
        font-size: 14px;

        &:hover {
          color: blue;
        }
      }

      span {
        margin: 0 4px;
        border-right: 1px solid #e1e1e1;
      }
    }
  }
}
</style>
